import * as echarts from 'echarts'

const useEchart = (
  containerEl: HTMLElement,
  theme: string | null = null,
  renderer: 'svg' | 'canvas' = 'svg'
) => {
  const echartInstance = echarts.init(containerEl, theme, { renderer })

  const setOption = (options: echarts.EChartsOption) => {
    echartInstance.setOption(options)
  }

  const disposeEchart = () => {
    echartInstance.dispose()
  }

  const resizeEchart = () => {
    echartInstance.resize()
  }

  onBeforeUnmount(() => {
    disposeEchart()
  })

  return {
    echartInstance,
    setOption,
    resizeEchart
  }
}

export default useEchart
